<template>
  <div class="approvalProcess">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>审批配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <div style="margin-bottom: 20px;">
          <span>审批流程：</span>
          <el-select style="margin-right: 20px;" @change="change" clearable v-model="value" placeholder="请选择">
            <el-option
              v-for="item in listOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>

<!--          <span>发起人：</span>-->
<!--          <el-select style="margin-right: 20px;" @change="change" clearable v-model="submitUserId" placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in userList"-->
<!--              :key="item.userId"-->
<!--              :label="item.userName"-->
<!--              :value="item.userId">-->
<!--            </el-option>-->
<!--          </el-select>-->

          <span>发起人角色：</span>
          <el-select style="margin-right: 20px;" @change="change" clearable v-model="submitRoleId" placeholder="请选择">
            <el-option
              v-for="item in allRoles"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
          </el-select>



          <span v-if="value=='IMPORT_APPLY_PROCESS4' || value=='IMPORT_APPLY_PROCESS5' ||value=='P5' || value=='P6'">工程类型：</span>
          <el-select v-if="value=='IMPORT_APPLY_PROCESS4' || value=='IMPORT_APPLY_PROCESS5' ||value=='P5' || value=='P6' " style="margin-right: 20px;" @change="change" clearable v-model="selectEngType" placeholder="请选择">
            <el-option
              v-for="item in engTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div>

        <div>
          <el-steps :active="active" finish-status="success">
            <el-step v-for="item in list" :key="item.nodeName" :title="item.nodeName">
              <template slot="description">
                <div v-for="it in item.nodeUserId" :key="it.userId">审批人：{{ it.userName }}</div>
              </template>
              <template slot="description">
                <div v-for="it in item.nodeCopyUserId" :key="it.userId">抄送人：{{ it.userName }}</div>
              </template>
            </el-step>
          </el-steps>
          <div v-if="value">
            <el-button type="primary" style="margin-top: 12px;" @click="visible = true">新增节点</el-button>
            <el-button style="margin-top: 12px;" @click="rest">重置节点</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map" style="text-align: center;font-size: 16px;">新增节点</p>
      <div class="flex">

<!--        <div style="display: flex;margin-bottom: 20px;align-items: center;">-->
<!--          <span style="-->
<!--    width: 82px;-->
<!--    text-align: right;-->
<!--">部门：</span>-->
<!--          <el-select v-model="dept" placeholder="请选择" @change="changeUsers">-->
<!--            <el-option-->
<!--              v-for="item in deptList"-->
<!--              :key="item.deptId"-->
<!--              :label="item.name"-->
<!--              :value="item.deptId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->

        <div style="display: flex;margin-bottom: 20px;align-items: center;">
          <span style="
    width: 82px;
    text-align: right;
">审批人：</span>
          <el-select multiple clearable v-model="name" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </div>

        <div style="display: flex;margin-bottom: 20px;align-items: center;">
          <span style="
    width: 82px;
    text-align: right;
">抄送人：</span>
          <el-select multiple clearable v-model="copyName" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </div>

        <div style="display: flex;align-items: center;">
          <span style="
    width: 100px;
    text-align: right;
">节点名称：</span>
          <el-input v-model="text"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submit">确认</el-button>
        <el-button class="global-button" round type="primary" @click="visible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {allEngTypeList,allProcessList, processDefineDetail, processSubmit, findAuditUsers,allRoles,ddDeptUser} from "@/api/user"

  export default {
    name: 'approvalProcess',
    components: {},
    data() {
      return {
        active: 100,
        title: "",
        list: [],
        listOptions: [],
        value: "",
        name: [],
        copyName:[],
        submitUserId:'',
        submitRoleId:'',
        dept:"",
        text: "",
        visible: false,
        userList: [],
        deptList:[],
        engTypes:[],
        selectEngType:'',
        allRoles:[]
      }
    },
    created() {
      allProcessList().then(res => {
        this.listOptions = res.data.data
      })
      allEngTypeList().then(res => {
        this.engTypes = res.data.data
      })
      findAuditUsers().then(res => {
        this.userList = res.data.data
      })
      allRoles().then(res=>{
        this.allRoles=res.data.data
      })

      // getDDDept().then(res => {
      //   this.deptList = res.data.data
      // })
    },
    methods: {
      changeUsers(){

        ddDeptUser(this.dept).then(res=>{

          this.userList = res.data.data
        })

      },
      processDefineList(key) {

        const key1=this.value
        const key2=this.submitRoleId
        const key3=this.selectEngType

        if (key1&&key2){
          this.$loading()
          processDefineDetail(key1+key2+key3).then(res => {
            this.active = 100
            this.list = res.data.data
            this.$loading().close()
          })
        }


      },
      // 新增审批节点
      next() {
        this.active++;
        // 接口
      },
      // 重置节点
      rest() {
        this.list = []
        // 接口
      },
      // 选择审批节点
      change(e) {
        this.list = []
        if (e) {
          // 接口查询
          this.processDefineList(e)
        } else {
          this.active = 0
        }
      },
      change2(e) {
        this.selectEngType=''
        this.list = []
        if (e) {
          // 接口查询
          this.processDefineList(e)
        } else {
          this.active = 0
        }
      },
      submit() {
        if (!this.name.length) {
          this.$message.error("请选择审批人")
          return
        }
        if (!this.text) {
          this.$message.error("请输入节点名称")
          return
        }

        let nodes = [...this.list]
        let ary = []
        nodes.map(item => {
          ary.push({
            index: item.index,
            nodeName: item.nodeName,
            nodeUserId: item.nodeUserId.map(it => it.userId),
            nodeCopyUserId: item.nodeCopyUserId.map(it=>it.copyUserId)
          })
        })
        ary.push({
          index: this.list.length,
          nodeName: this.text,
          nodeUserId: this.name,
          nodeCopyUserId: this.copyName
        })
        let json = {
          "nodes": ary,
          "processKey": this.value,
          "submitUserId":this.submitUserId,
          "engType":this.selectEngType,
          "submitRoleId":this.submitRoleId
        }
        this.$loading()
        processSubmit(json).then(res => {
          this.$loading().close()
          if (res.data.code == "200") {
            this.$message.success("新增成功")
            this.processDefineList(this.value+this.submitUserId)
            this.visible = false
            this.text = ""
            this.name = []

          } else {
            this.$message.error(res.data.message)
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
</style>
